<template>
    <div>
        <el-form ref="disasterScenariosRef" :model="form" label-width="150px" style="padding:0 40px 0px 20px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任务名称" prop="taskName" label-width="70px">
                        {{form.taskName}}
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item label="最新维护人" prop="maintainer">
                        {{task.maintainer}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最新维护时间" prop="maintainTime">
                        {{task.maintainTime}}
                    </el-form-item>
                </el-col> -->
            </el-row>
            <el-row>
                    <el-col :span="24">
                        <el-form-item label="行政区划分析级别" prop="isCity" @change="changeCity">
                            <el-radio-group v-model="isCity">
                                <el-radio label="0">按区县</el-radio>
                                <el-radio label="1">按地市</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <template v-if="isCity=='0'">
                    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane v-for="(item,index) in form.areaList" :key="index" :label="item.province==item.city?item.province + item.area:item.province + item.city + item.area" :name="index">
                            <el-form-item label="建筑物破坏" :prop="`areaList.` + index + '.buildingDamage'" :rules="rules.buildingDamage">
                                <el-input v-model="item.buildingDamage" placeholder="请输入建筑物破坏" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="人员伤亡" :prop="`areaList.` + index + '.casualties'" :rules="rules.casualties">
                                <el-input v-model="item.casualties" placeholder="请输入人员伤亡" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="地质灾害" :prop="`areaList.` + index + '.geologicHazard'" :rules="rules.geologicHazard">
                                <el-input v-model="item.geologicHazard" placeholder="请输入地质灾害" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="次生灾害" :prop="`areaList.` + index + '.secondaryDisaster'" :rules="rules.secondaryDisaster">
                                <el-input v-model="item.secondaryDisaster" placeholder="请输入次生灾害" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="震后交通" :prop="`areaList.` + index + '.earthquakeTraffic'" :rules="rules.earthquakeTraffic">
                                <el-input v-model="item.earthquakeTraffic" placeholder="请输入震后交通" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="其他灾害情景">
                                <el-input v-model="item.otherDisaster" placeholder="请输入其他灾害情景" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>  
                </template>            
                <template v-else>
                    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane v-for="(item,index) in form.areaList" :key="index" :label="item.province==item.city?item.city:item.province+item.city" :name="index">
                            <el-form-item label="建筑物破坏" :prop="`areaList.` + index +  '.buildingDamage'" :rules="rules.buildingDamage">
                                <el-input v-model="item.buildingDamage" placeholder="请输入建筑物破坏" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="人员伤亡" :prop="`areaList.` + index +  '.casualties'" :rules="rules.casualties">
                                <el-input v-model="item.casualties" placeholder="请输入人员伤亡" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="地质灾害" :prop="`areaList.` + index +  '.geologicHazard'" :rules="rules.geologicHazard">
                                <el-input v-model="item.geologicHazard" placeholder="请输入地质灾害" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="次生灾害" :prop="`areaList.` + index +  '.secondaryDisaster'" :rules="rules.secondaryDisaster">
                                <el-input v-model="item.secondaryDisaster" placeholder="请输入次生灾害" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="震后交通" :prop="`areaList.` + index +  '.earthquakeTraffic'" :rules="rules.earthquakeTraffic">
                                <el-input v-model="item.earthquakeTraffic" placeholder="请输入震后交通" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                            <el-form-item label="其他灾害情景">
                                <el-input v-model="item.otherDisaster" placeholder="请输入其他灾害情景" type="textarea" :rows="5" maxlength="2000" show-word-limit :disabled="isDisabled"/>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>  
                </template>
        </el-form>
    </div>
</template>

<script setup>
import { getArea } from "@/api/suggestions/analyse.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
  form: {
    type: Object,
  },
  task: {
    type: Object
  },
  isDisabled:{
    type:Boolean,
  }
});
const activeName = ref(0)
const data = reactive({
    rules: {
        buildingDamage: [{ required: true, message: "请输入建筑物破坏", trigger: 'blur', }],
        casualties: [{ required: true, message: "请输入人员伤亡", trigger: 'blur' }],
        geologicHazard: [{ required: true, message: '请输入地质灾害', trigger: 'blur'}],
        secondaryDisaster: [{ required: true, message: '请输入次生灾害', trigger: 'blur'}],
        earthquakeTraffic: [{ required: true, message: "请输入震后交通", trigger: "blur" }],
    }
})
const { rules } = toRefs(data)
const { form,task,isDisabled } = toRefs(props)

const isCity = ref('0');

// 初始下标
function initActiveName(){
    activeName.value = 0;
}

function changeCity(){
    activeName.value = 0
    getAreaData({flag:isCity.value,taskDistrict:form.value.taskDistrict,suggestionName:'灾害情景分析',taskNum:form.value.taskNum})
}

// 获取 区县或者地市
function getAreaData(isCity) {
    getArea(isCity).then(response => {
        emit("changeAreaList", response.data['灾害情景分析']);
    })
}

function getAreaList(){
    emit("getAreaList", form.value.areaList);
}

function handleClick(tab, event){
    // console.log(tab, event)
}

function getDisasterScenariosRef(){
    return proxy.$refs['disasterScenariosRef']
}
defineExpose({
    getAreaList,
    initActiveName,
    getDisasterScenariosRef
})
</script>